<template>
	<div class="chartContainer">
		<div class="chart" ref="chart" :style="{padding: padding}"></div>
		<div class="my-legend" ref="myLegend" :style="{height: this.seriesArr.length > 6 ? '68px' : 'auto'}">
			<div
				class="legend-item"
				v-for="(item, index) in seriesArr"
				:key="index"
				@click="toggleLegend(index)">
					<span :style="cpuLegendDotStyle(index)"></span>
					<span :style="cpuLegendTextStyle(index)">{{item.name}}</span>
			</div>
		</div>
		<div
			class="folder-btn"
			v-if="seriesArr.length > 6"
			@click="isfold = !isfold">
				<span v-show="isfold">...</span>
				<span v-show="!isfold" class="iconfont icon-xiangshang"></span>
		</div>
	</div>
</template>

<script>
	import echarts from 'echarts/lib/echarts'
	import fmt from '../../../filters/format-time.js'
	require('echarts/lib/chart/line')
	require('echarts/lib/component/legend')

	let colorArr = ['#C4DBEA', '#ff4f4f', '#f87dd7', '#b89ce7', '#c19068', '#F5EC60', '#9CB3F4', '#B0ED83', '#8FE6C2', '#FFAD88']

	let xAxisDataMock = ["2017.09.14", "2017.09.15", "2017.09.16", "2017.09.17", "2017.09.18", "2017.09.21"]

	let seriesDataMock = []
	// let mockNameArr = ['广东财经大学龙虎队', '广东师范大学凤雏队', '武当派', '逍遥派', '少林派', '少数派', '美国派', '苹果派', '草莓派', '香蕉派', '星大派']
	let mockNameArr = []

	// for(let i = 0; i < 11; i++) {
	// 	let dataList = []
	// 	for(let j = 0; j < 51; j++) {
	// 		let data = ((Math.random() * 3 - 1)).toFixed(6)
	// 		dataList.push(data)
	// 	}
	// 	let dataItem = {
	// 		name: mockNameArr[i],
	// 		data: dataList
	// 	}
	// 	seriesDataMock.push(dataItem)
	// }

	const chartOpt = {
		legend: {
			show: false,
			data: []
		},
    grid: {
			show: false,
			height: 140,
			top: '8%',
			left: '0%',
			right: '6%',
			containLabel: true,
			borderColor: '#e2e1e1'
    },
    xAxis: {
			type: 'category',
			boundaryGap: false,
			axisLine: {
				onZero: false,
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisLabel: {
				interval: 0,
				textStyle: {
					color: '#89888a',
					fontSize: 11
				},
				rotate: 90
			},
			splitLine: {
				show: true,
				interval: 0,
				lineStyle: {
					color: '#f1f1f1'
				}
			},
			data: []
    },
    yAxis: {
			type: 'value',
			boundaryGap: ['0%', '10%'],
			// minInterval: 2,
			// interval: 0.5,
			axisLine: {
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisTick: {
				lineStyle: {
					color: '#e2e1e1'
				}
			},
			axisLabel: {
				interval: 10,
				textStyle: {
					color: '#89888a',
					fontSize: 12
				},
				formatter: (val, idx) => {
					return val > 0 ? `+${val}%` : `${val}%`
				}
			},
			splitLine: {
				show: true,
				interval: 0,
				lineStyle: {
					color: '#f1f1f1'
				}
			}
    },
    series: []
	}

  export default {
		name: 'trend-chart',
    data () {
			return {
				colorArr: colorArr,
				legendSelected: {},
				isfold: true,
				seriesArr: [],
				chartOpt: chartOpt
			}
		},
		props: {
			padding: {
				type: String,
				default: '0'
			}
		},
		watch: {
			isfold (val) {
				this.$refs.myLegend.style.height =  val ? '68px' : 'auto'
			}
		},
		mounted () {
			this.initChart()
			this.updateOpt(xAxisDataMock, seriesDataMock)
		},
		destroyed () {
			this.chart.dispose()
		},
		methods: {
			initChart () {
				this.chart = echarts.init(this.$refs.chart)
			},
			/** updateOpt 更新图表设置
      * @param {Array} xAxisData 横坐标数据，格式:['2017.08101', '2017.0814', ...]
      * @param {Array} seriesData 系列列表数据，格式:[{name: '武当派', data: ['1.65', '1.36', ...]}, ...]
      */
			updateOpt (xAxisData, seriesData) {
				//清空数据
				this.seriesArr = []
				let nameArr = []
				for(let i = 0; i < seriesData.length; i++) {
					if(i === 10) {
						break
					}
					let obj = {}
					Object.assign(obj, {
						name: seriesData[i].name,
						type: 'line',
						data: seriesData[i].data,
						smooth: true,
						lineStyle: {
							normal: {
								color: colorArr[i],
								width: 1.2
							}
						},

					})
					// obj.name = seriesData[i].name
					// obj.type = 'line'
					// obj.data = seriesData[i].data
					// obj.smooth = true
					if(seriesData[i].data.length === 1) {
						obj.showSymbol = true
						obj.itemStyle = {
							normal: {
								color: colorArr[i],
								borderColor: colorArr[i]
							}
						}
					} else {
						obj.showSymbol = false
					}
					// obj.lineStyle = {
					// 	normal: {
					// 		color: colorArr[i],
					// 		width: 1.2
					// 	}
					// }
					if(i === 0) {
						obj.areaStyle = {
							normal: {
								color: '#dde8ea',
								opacity: 0.3
							}
						}
					}
					nameArr.push(seriesData[i].name)
					this.seriesArr.push(obj)
				}
				this.chartOpt.legend.data = nameArr
				this.chartOpt.xAxis.data = xAxisData
				this.chartOpt.series = this.seriesArr
				this.chartOpt.xAxis.axisLabel.formatter = this.xAxisLabelFormatter
				this.chart.setOption(this.chartOpt)   //notMerge,不跟之前设置的option进行合并
				this.initLegend()
			},

			initLegend () {
				let arr = this.seriesArr
				this.chart.on('legendselectchanged', (params) => {
					console.warn(params);
					this.legendSelected = params.selected
				})
				for(let i in arr) {
					if(i < 6) {
						this.legendSelected[arr[i].name] = true
					} else {
						this.legendSelected[arr[i].name] = false
						this.chart.dispatchAction({
							type: 'legendUnSelect',
							name: arr[i].name
						})
					}
				}
			},

			toggleLegend (idx) {
				this.chart.dispatchAction({
					type: 'legendToggleSelect',
					name: this.seriesArr[idx].name
				})
			},

			cpuLegendDotStyle (idx) {
				return {
					border: `1px solid ${this.colorArr[idx]}`,
					background: this.legendSelected[this.seriesArr[idx].name] === true ? this.colorArr[idx] : '#fff'
				}
			},

			cpuLegendTextStyle (idx) {
				return {
					opacity: this.legendSelected[this.seriesArr[idx].name] === true ? 1 : 0.3
				}
			}
		}
  }
</script>

<style lang="less" scoped>

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.before {
	content: '';
	display: block;
}

.chartContainer {
	position: relative;
	width: 100%;
}

.chart {
	width: 78%;
	height: 220px;
	margin: 0 auto;
	padding-top: 0;
	background-color: #fff !important;
}

.my-legend {
	width: 100%;
	min-height: 24px;
	padding-left: 18%;
	margin-bottom: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	font-size: 12px;
	color: #666;
	// align-content: stretch;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.legend-item {
	width: 48%;
	height: 24px;
	display: flex;
	flex-direction: row;
	position: relative;
	align-items: center;
	span {
		&:nth-of-type(1) {
			width: 6px;
			height: 6px;
			border-radius: 50%;
		}
		&:nth-of-type(2) {
			width: 80%;
			margin-left: 10px;
			display: inline-block;
			.ellipsis;
		}
	}
}

.folder-btn {
	position: relative;
	margin-top: 4px;
	width: 100%;
	height: 3rem;
	border-top: 1px solid #e7e7e7;
	text-align: center;
	font-size: 20px;
	line-height: 18px;
	background-color: #fff;
	span {
		position: absolute;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 22px;
		color: #ccc;
		&:nth-of-type(1) {
			top: 30%;
		}
		&:nth-of-type(2) {
			top: 50%;
		}
	}
}
</style>
